<!-- 任务操作按钮组件 -->
<template>
  <view v-if="showTaskActions" class="task-actions">
    <!-- 撤回申请按钮 -->
    <button 
      v-if="canCancelApply && !hasPendingMessages" 
      class="cancel-apply-btn" 
      @click="$emit('cancel-apply')"
    >
      <text>撤回申请</text>
    </button>
    
    <!-- 申请取消任务按钮 -->
    <button 
      v-if="canRequestCancel && !hasPendingMessages" 
      class="request-cancel-btn" 
      @click="$emit('request-cancel')"
    >
      <text>申请取消任务</text>
    </button>
    
    <!-- 删除任务按钮 -->
    <button 
      v-if="canDeleteTask" 
      class="delete-task-btn" 
      @click="$emit('delete-task')"
    >
      <text>删除任务</text>
    </button>
    
    <!-- 待处理消息提示 -->
    <view v-if="hasPendingMessages" class="pending-messages">
      <text class="pending-title">有待处理的消息</text>
      <view v-for="msgType in pendingMessageTypes" :key="msgType" class="pending-item">
        <text v-if="msgType === 3">• 任务申请待处理</text>
        <text v-else-if="msgType === 9">• 取消申请待处理</text>
        <text v-else-if="msgType === 4">• 完成申请待处理</text>
      </view>
      <button class="view-messages-btn" @click="$emit('view-messages')">
        <text>查看消息</text>
      </button>
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

// Props
const props = defineProps({
  showTaskActions: {
    type: Boolean,
    default: false
  },
  canCancelApply: {
    type: Boolean,
    default: false
  },
  canRequestCancel: {
    type: Boolean,
    default: false
  },
  canDeleteTask: {
    type: Boolean,
    default: false
  },
  hasPendingMessages: {
    type: Boolean,
    default: false
  },
  pendingMessageTypes: {
    type: Array,
    default: () => []
  }
})

// Emits
const emit = defineEmits([
  'cancel-apply',
  'request-cancel', 
  'delete-task',
  'view-messages'
])
</script>

<style scoped>
.task-actions {
  margin: 20rpx 0;
  padding: 20rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.cancel-apply-btn,
.request-cancel-btn,
.delete-task-btn {
  width: 100%;
  padding: 20rpx;
  margin-bottom: 20rpx;
  border-radius: 12rpx;
  font-size: 28rpx;
  font-weight: 500;
  border: none;
}

.cancel-apply-btn {
  background: #ff9800;
  color: white;
}

.request-cancel-btn {
  background: #f44336;
  color: white;
}

.delete-task-btn {
  background: #d32f2f;
  color: white;
}

.pending-messages {
  background: #fff3cd;
  border: 2rpx solid #ffeaa7;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-top: 20rpx;
}

.pending-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #856404;
  margin-bottom: 10rpx;
  display: block;
}

.pending-item {
  font-size: 26rpx;
  color: #856404;
  margin-bottom: 8rpx;
}

.view-messages-btn {
  background: #ffc107;
  color: #333;
  padding: 16rpx 32rpx;
  border-radius: 8rpx;
  font-size: 26rpx;
  font-weight: 500;
  border: none;
  margin-top: 10rpx;
}
</style>
